<template>
	<div style="width: 100%;height:200px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);position: relative;">
		<i class="el-icon-rank drag-widget" style="position: absolute;left: 0px;top:0px;z-index: 100;" v-show="selected"></i>
		<i class="el-icon-s-grid" style="position: absolute;right: 0px;top:0px;z-index: 100;" @click="onIconClickHandler"></i>
		<div style="width: 100%;height:200px;"
			:id="componentModel.id+'_design'" @click.stop="onClickHandler"
			:class="[selected ?'m-row-selected-state' : 'm-row-normal-state']">
		</div>
		<ChartConfigDialog ref="chartConfigDialog"></ChartConfigDialog>
	</div>
</template>

<script>
	import utils from '@/utils/utils.js';
	import * as echarts from 'echarts';
	import ChartConfigDialog from './ChartConfigDialog.vue';
	import formDesignerUtil from '@/utils/formDesignerUtil.js';
	export default {
		name: "DesignGaugeComponent",
		components:{ChartConfigDialog},
		props: [
			"componentModel"
		],
		data() {
			return {
				selected: false,
				"propertySet": [{
						"key": "ID",
						"label": "ID",
						"editor": "label",
					},
					{
						"key": "dataSource",
						"label": "数据源",
						"editor": "select"
					}, {
						"key": "title",
						"label": "标题",
						"editor": "text",
					}, {
						"key": "subtitle",
						"label": "子标题",
						"editor": "text",
					},
					{
						"key": "min","label":"最小值","editor":"text"
					},
					{
						"key": "max","label":"最大值","editor":"text"
					}
				],
				myChart:null,
				option:null,
				value:50,
			}
		},
		inject: ['children'],
		beforeMount() {
		},
		mounted() {
			this.children.push(this);
			
			this.myChart = echarts.init(document.getElementById(this.componentModel.id+"_design"));
			this.option = {
				title:{
					text:this.componentModel.title,
					subtext:this.componentModel.subtitle
				},
				series: [{
					name: 'Pressure',
					type: 'gauge',
					min:0,
					max:100,
					detail: {
						formatter: '{value}'
					},
					data: [{
						value:this.value
					}]
				}]
			};
			this.myChart.setOption(this.option);
			
		},beforeUnmount() {
			utils.removeArrayElement(this.children,this);
		},
		methods: {
			onClickHandler() {
				formDesignerUtil.mobileComponentClickHandler(this);
			},
			setSelected(selected) {
				this.selected = selected;
			},
			getPropertyValue(propertyKey) {
				if(propertyKey=="ID"){
					return formDesignerUtil.getComponentModelPropValue(this.componentModel,"id");
				}else if (propertyKey == "title") {
					return formDesignerUtil.getComponentModelPropValue(this.componentModel,"title");
				}else if (propertyKey == "subtitle") {
					return formDesignerUtil.getComponentModelPropValue(this.componentModel,"subtitle");
				}
				return formDesignerUtil.getComponentModelCommonValue(this.componentModel,propertyKey);
			},
			setPropertyValue(propertyKey, propertyValue) {
				formDesignerUtil.setComponentModelCommonValue(this.componentModel,propertyKey, propertyValue);
				if (propertyKey == "title") {
					this.option["title"]["text"]=propertyValue;
					this.myChart.clear();
					this.myChart.setOption(this.option);
					formDesignerUtil.setComponentModelPropValue(this.componentModel,"title",propertyValue);
				}else if(propertyKey == "subtitle"){
					this.option["title"]["subtext"]=propertyValue;
					this.myChart.clear();
					this.myChart.setOption(this.option);
					formDesignerUtil.setComponentModelPropValue(this.componentModel,"subtitle",propertyValue);
				}
			},onIconClickHandler() {
				var dataSource = this.getPropertyValue("dataSource");
				if (dataSource == undefined || dataSource == "") {
					this.$alert("请选择数据源", "提示");
					return;
				}
				this.$refs.chartConfigDialog.setVisible(true);
				var dataSourceList = this.$store.state.mformDesigner.$refs.dataSourceConfig.datasourceList;
				var tableName;
				for (var i = 0; i < dataSourceList.length; i++) {
					if (dataSourceList[i].id == dataSource) {
						tableName = dataSourceList[i].tableName;
						break;
					}
				}
				this.$refs.chartConfigDialog.init(tableName,this.componentModel);
			}
		}
	}
</script>

<style>
	
</style>
